<template>
  <Header title="教师点名"></Header>
  <div class="content" id="content">

    <van-collapse v-model="activeNames" v-for="(item,index) in taskList" :key="index" accordion>
      <van-collapse-item :name="index" :is-link="false" @click="handleTime(index)">
        <template #value>
          <van-cell>
            <div class="container">
              <div class="left">
                <div class="upper">{{item.courseName}}</div>
                <div class="lower">{{item.className}}</div>
              </div>
              <div class="right">
                <van-button @click.stop.prevent="handleButton(item.tcID,index)" style="white-space: nowrap;">新建点名</van-button>
              </div>
            </div>
          </van-cell>
        </template>
        <van-cell  class="time" v-for="(value,ind) in times" :key="ind">
          <router-link :to="{ name: '点名详情', query: { tcID: item.tcID, id: value.id, index: index}}">
            <div class="dmDetail">
              <p style="padding-left: 30px; width: 30vw; font-size: 4.5vw;">第{{ parseInt(ind)+1}}次</p>
              <p style=" width: 55vw; font-size: 4.5vw;">{{ value.time}}</p>
              <var-icon name="chevron-right" />
            </div>
          </router-link>
        </van-cell>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
import {onMounted, ref} from "vue"
import 'vant/lib/index.css'
import {teacherTask} from '/@/api/jsdm';
import {getAttendanceTimes} from "/@/api/jsdm";
import {useRouter} from "vue-router/dist/vue-router";
import {UseGetAttendanceTimesStore} from "../../store/modules/jsdm";

export default {
  setup(){
    const getAttendance = UseGetAttendanceTimesStore();
    const activeNames = ref('');
    const taskList = ref([])
    const times = ref([]);
    const router = useRouter();
    const data = ref([]);

    const initData = async () => {
      if(getAttendance.flag)
      {
        const resTask = await teacherTask();
        const res = resTask.response.value;
        taskList.value = res.teacherTask;
        getAttendance.setteacherTask(resTask.response.value.teacherTask)
        for(let i = 0; i < taskList.value.length; i++){
          const resTime = await getAttendanceTimes(taskList.value[i].tcID);
          getAttendance.setAttendanceTimes(resTime.response.value)
          // data.value.push(getAttendance.data[i].times)
        }
      }
      taskList.value = getAttendance.task;
      for(let i = 0; i < taskList.value.length; i++)
      {
        data.value.push(getAttendance.data[i].times)
      }

    };

    const handleButton = (tcID,index) =>{
      router.push({ name: '点名方式', query: { tcID: tcID, index: index }})
    }



    const handleTime =  (ind) =>{
      console.log(data.value[ind])
      times.value = data.value[ind];
    }

    onMounted(() => {
      initData();
    });
    return{
      activeNames,
      taskList,
      times,
      handleTime,
      handleButton
    }
  }
}
</script>

<style scoped lang="less">
/deep/.van-collapse{
  margin: 10px;
  .container {
    display: flex;
  }
  .dmDetail{
    display: flex;
    align-items: center;
    color: #727d82;
  }

  .van-collapse-item__content {
    padding: 0;
    background-color: #f6f6f7;
  }

  .van-cell{
    padding: 12px 0 12px 0;
  }

  .right {
    flex: 1 0 25%;
    background-color: #FDFDFEFF;
    padding-top: 10px;
  }

  .left {
    height: 13vw;
    padding-left: 20px;
    flex: 4 0 50%;
    display: flex;
    flex-direction: column;
    background-color: #FDFDFEFF;
  }

  .upper {
    flex: 1;
    color: #687273;
    font-size: 4.5vw;
  }

  .lower {
    flex: 2;
    display: flex;
    font-size: 3vw;
    color: #9a9b9d;
  }
}

.content {
  display: block;
  align-items: center;
}

.info {
  flex: 1;
}

.van-button {
  background-color: #2b94ee;
  padding: 0;
  color: #f6f6f7;
  border-radius: 20px;
  width: 20vw;
  height: 4vh;
  font-size: 3.5vw;
  cursor: pointer;
  margin-left: 30px;

}


.time{
  background-color: inherit;
  border-top: 1px solid #E2EDF2FF;
  height: 12vw;
  display: flex;
  justify-content: center;
  align-items: center;
}


</style>
